<template>
    <div class="tools">
        <div @click="measure('distance')">测距</div>
        <div @click="measure('height')">高度</div>
        <div @click="measure('angle')">角度</div>
        <div @click="measure('pickPoint')">点拾取</div>
        <div @click="measure('addNear')">放大</div>
        <div @click="measure('reduceNear')">缩小</div>
        <div @click="measure('rotate')">旋转</div>
        <div @click="measure('returnBegin')">回正(针对旋转操作)</div>
        <div @click="measure('boxHelper')">包围盒</div>
        <div @click="measure('clearOperate')">清除痕迹</div>
        <!-- <div @click="measure('group')">加载group模型</div> -->
        <div @click="measure('heighlight')">描边</div>
        <div @click="measure('clock')">关键帧</div>
    </div>
</template>
<script lang='ts' setup>
import { onMounted, ref } from 'vue';
import { distance } from './Tools/distance';
import clearOperate from './Tools/clear';
import { boxHelper } from './Tools/boxHelper';
import addNear from './Tools/addNear';
import reduceNear from './Tools/reduceNear';
import rotate from './Tools/rotate';
import pickPoint from './Tools/pickPoint';
import height from './Tools/height';
import returnBegin from './Tools/returnBegin';
import angle from './Tools/angle';
import group from './functions/Group';
import heighlight from './heighlight';
import clockFun from './functions/clock';
const distanceVis = ref(false);
const boxHelperVis = ref(false);
const pickPointVis = ref(false);
const heightVis = ref(false);
const angleVis = ref(false);
function measure(val: any) {
    switch (val) {
        case 'distance':
            distanceVis.value = !distanceVis.value;
            distance(distanceVis.value);
            break;
        case 'clearOperate':
            clearOperate();
            break;
        case 'pickPoint':
            pickPointVis.value = !pickPointVis.value;
            pickPoint(pickPointVis.value);
            break;
        case 'boxHelper':
            boxHelperVis.value = !boxHelperVis.value;
            boxHelper(boxHelperVis.value);
            break;
        case 'addNear':
            addNear();
            break;
        case 'reduceNear':
            reduceNear();
            break;
        case 'rotate':
            rotate();
            break;
        case 'height':
            heightVis.value = !heightVis.value;
            height(heightVis.value);
            break;
        case 'returnBegin':
            returnBegin();
            break;
        case 'angle':
            angleVis.value = !angleVis.value;
            angle(angleVis.value);
            break;
        case 'group':
            group();
            break;
        case 'heighlight':
            heighlight();
            break;
        case 'clock':
            clockFun();
            break;

    }
}
onMounted(() => {
})
</script>
<style scoped lang="scss">
.tools {
    position: absolute;
    left: 0px;
    top: 10px;
    width: 100px;
    height: 95vh;
    // border: 1px solid orange;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    div {
        width: 80%;
        background-color: orange;
        text-align: center;
        cursor: pointer;
    }
}
</style>